// import store from "../../redux/index";
import useAppStore, {
  getTotal,
  decrement,
  increament,
  doubleCount,
} from "./appStore";
import { useShallow } from "zustand/react/shallow";
import React from "react";

const Mychild1: React.FC = () => {
  const count = useAppStore((state) => state.count);
  const price = useAppStore((state) => state.price);
  // const getTotal = useAppStore((state) => state.getTotal);
  // const increament = useAppStore((state) => state.increament);
  // const decrement = useAppStore((state) => state.decrement);
  // const doubleCount = useAppStore((state) => state.doubleCount);
  // const { getTotal, increament, increament, doubleCount } = useAppStore();
  return (
    <div>
      <p>数量：{count}</p>
      <p>价格:{price}</p>
      <p>金额：{getTotal()}</p>
      <button onClick={increament}>加量</button>
      <button onClick={decrement}>减量</button>
      <button onClick={doubleCount}>双倍</button>
    </div>
  );
};
const Mychild12: React.FC = () => {
  const { color, price } = useAppStore(
    useShallow((state) => ({
      color: state.color,
      price: state.price,
    }))
  );
  console.log("价格更新", price);

  return (
    <div>
      {" "}
      <p>颜色{color}</p>
      <p>价格2:{price}</p>
    </div>
  );
};
export default function Login() {
  // const updateConunt = () => {
  //   const addConut = { type: "Add_COUNT", number: 10 };
  //   store.dispatch(addConut);
  // };
  return (
    <div>
      首页
      <p>子类1</p>
      {/* {mychild1()} */}
      <Mychild1 />
      <p>子类2</p>
      {/* {mychild12()} */}
      <Mychild12 />
    </div>
  );
}
